<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        .aui-content {
            padding: 0.5rem 1rem;
        }

        .info {
            padding: 0.75rem 0 1.5rem;
        }

        .infoItem {
            height: 2.8rem;
            position: relative;
        }

        .infoItem select,
        .infoItem input.textInput {
            font-size: 0.9rem;
            height: 2.8rem;
            line-height: normal;
            color: #333;
            text-align: left;
            padding: 0 2rem 0 0;
        }

        .getCode {
            width: 5.5rem;
            height: 2rem;
            line-height: 2rem;
            font-size: 0.6rem;
            color: #fff;
            background: #FF8A9C;
            border-radius: 0.2rem;
            text-align: center;
        }

        .top-title {
            font-size: 1.4rem;
        }

        .bom-tit {
            color: #363336;
        }

        .comBtmBtn {
            background: -webkit-linear-gradient(#E73350, #FF748A);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(#E73350, #FF748A);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(#E73350, #FF748A);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(#E73350, #FF748A);
            /* 标准的语法 */
        }

        .comBtmBtn.disabled {
            background: #E7E7E7;
            color: #9B9B9B;
        }

        .bomFixed {
            /* position: fixed;
            width: 100%;
            bottom: 1rem; */
            font-size: 0.6rem;
            color: #adadad;
            text-align: center;

            margin-top: 3.5rem;
        }

        .inputDel {
            background: url(../image/common/close.png) no-repeat center center;
            position: absolute;
            right: 0.25rem;
            top: 50%;
            width: 1.5rem;
            height: 1.5rem;
            margin-top: -0.75rem;
            background-size: 0.8rem;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav" id="header">
        <div class="aui-pull-left back" tapmode onclick="api.closeWin()"></div>
        <div class="aui-title aui-ellipsis"></div>
        <!-- <div class="aui-pull-right" tapmode onclick="openWin()"><img src="../../image/common/06.png" alt=""></div> -->
    </header>
    <div class="aui-content">
        <div class="top-title">验证手机号</div>
        <div class="bom-tit aui-font-size-12 color-36">为保障你的财产安全，请验证您的手机号码</div>
        <div class="info">
            <div class="infoItem aui-border-b">
                <input type="tel" name="" value="" placeholder="手机号" class="textInput" id="phone" onKeyUp="changeVal();" onblur="vertMobile();">
                <div class="inputDel aui-hide" tapmode onclick="quxiao(this)"></div>
            </div>
            <div class="infoItem aui-border-b aui-flex-col aui-flex-middle aui-flex-between">
                <div class="relative flex-auto">
                    <input type="tel" maxLength="6" name="" value="" placeholder="验证码" class="textInput inp" id="code" onKeyUp="changeVal();">
                    <div class="inputDel aui-hide" tapmode onclick="quxiao(this)"></div>
                </div>
                <div class="getCode ready" tapmode onclick="getCode()">获取验证码</div>
            </div>
            <!-- 邀请码 -->
            <div class="maBox">
                <div class="infoItem aui-border-b">
                    <input type="text" name="" value="" placeholder="邀请码" class="textInput" id="yCode" onKeyUp="changeVal();" onchange="changeVal();">
                    <div class="inputDel aui-hide" tapmode onclick="quxiao(this)"></div>
                </div>
                <div class="aui-font-size-14 color-ad aui-padded-t-10">没有邀请码？向给你推荐APP的好友索取</div>
            </div>

            <!-- 直接显示邀请人的 -->
            <div class="peoBox aui-hide">
                <div class="infoItem aui-border-b aui-flex-col aui-flex-middle">
                    <div class="flex-auto">邀请人</div>
                    <div>
                        <div class="avatar" style="width: 1.2rem;"><img src="../image/demo/01.png" alt=""></div>
                    </div>
                    <span class="aui-padded-l-5 aui-font-size-12 color-333">霏霏雨</span>
                </div>
            </div>

        </div>
        <div class="comBtmBtn radius disabled" tapmode onclick="save()">验证</div>
    </div>
    <div class="bomFixed" tapmode onclick="openKefu()">咨询电话：0571-81234567</div>
</body>
<script type="text/javascript" src="../script/import.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
var isSave = false;
    var PARAM_INFO;
    var phone;
    var code;
    var ycode;
    var USER_INFO;
    var saveBtnFlag = true;
    var regType;
    var userId;
    apiready = function() {
        api.parseTapmode();
        var header = $api.byId('header');
        $api.fixStatusBar(header);
        PARAM_INFO = api.pageParam;
    };
    //判断默认显示 清空按钮
    changeVal();

    // 获取验证码
    var times = 59;
    var isinerval;

    function getCode() {
        if (!$$('.getCode').hasClass('ready')) {
            return;
        }
        if(!checkMobile()){
          return;
        }
        $$('.getCode').removeClass('ready');
        //发送验证码 接口地址
        smsUrl = 'App/User/sendSms';
        testSmsUrl = 'App/User/addCode';

        //测试验证码 （不发送短信，console.log）
        // api.ajax({
        //   url: BASE_URL + testSmsUrl,
        //   method: 'post',
        //   data: {
        //     values: {
        //       mobile: phone
        //     }
        //   }
        // },function(ret, err){
        //   log(ret)
        //   log(err)
        //   if (ret) {
        //     if(ret.code){
        //       toast('发送成功');
        //       times = 59;
        //       isinerval = setInterval("countDown()", 1000);
        //     }else{
        //       toast('发送失败');
        //       $$('.getCode').addClass('ready');
        //     }
        //   }else{
        //     toast('发送失败，请稍候再试');
        //     $$('.getCode').addClass('ready');
        //   }
        // });
        // return;

        //正式发短信接口
        api.ajax({
          url: BASE_URL + smsUrl,
          method: 'post',
          data: {
            values: {
              mobile: phone
            }
          }
        },function(ret, err){
          if (ret) {
            if(ret.Code=='OK'){
              toast('发送成功');
              times = 59;
              isinerval = setInterval("countDown()", 1000);
            }else{
              toast(ret.Message);
              $$('.getCode').addClass('ready');
            }
          }else{
            toast('发送失败，请稍候再试');
            $$('.getCode').addClass('ready');
          }
        });


    }
    //倒计时
    function countDown() {
        if (times < 1) {
            $$('.getCode').addClass('ready').text('重新获取');
            clearInterval(isinerval);
            return;
        }
        $$('.getCode').text(times+'s');
        times--;
    }
    //手机号验证
    function checkMobile(){
      phone = $$("#phone").val();
      var phoneRule = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
      if(!phone){
        toast('请输入手机号');
        return false;
      }
      else if(!phoneRule.test(phone)){
        toast('不是有效的号码');
        return false;
      }
      return true;
    }
    //输入框 keyup事件
    function changeVal(){
        $$('input.textInput').each(function() {
            var _this = $$(this);
            var delBtn = _this.next('.inputDel');
            if ( _this.val() ) {
                delBtn.removeClass('aui-hide');
            } else {
                delBtn.addClass('aui-hide');
            }
        });
        saveBtnFlag = true;
        phone = $$("#phone").val();
        code = $$('#code').val();
        ycode = $$('#yCode').val();
        if(!phone || !code ){
          saveBtnFlag = false;
        }
        if( regType == 1 && !ycode ){
            saveBtnFlag = false;
        }
        if(saveBtnFlag){
          $$('.comBtmBtn').removeClass('disabled');
        }else{
          $$('.comBtmBtn').addClass('disabled');
        }
    }
    //清空事件
    function quxiao(el) {
        var inp = $$(el).prev().val('');
        changeVal();
    }
    function vertMobile(){
        phone = $$("#phone").val();
        if(!phone){
            return;
        }
        api.ajax({
          url: BASE_URL + 'App/User/verifyMobile',
          method: 'post',
          data: {
            values: {
                mobile: phone
            }
          }
        },function(ret, err){
            log(ret)
          if (ret) {
            if(ret.code == 2){
                //用户信息不存在，可完成注册   正常注册流程
                regType = 1;

            }else if(ret.code == 1){
                //有用户信息 还没有绑定微信
                regType = 2;
                userId = ret.userid;
                $$('.maBox').addClass('aui-hide');
            }
          }
        });
    }
    //保存
    function save() {
        if( $$('.comBtmBtn').hasClass('disabled') ){
          return;
        }
        if(isSave){
            return;
        }
        isSave = true;

        var postData = PARAM_INFO;
        postData.mobile = phone;
        postData.code = code;
        postData.type = regType;
        if(regType == 1){
            postData.invitation_code = ycode;
        }
        if(regType == 2){
            postData.userid = userId;
        }

        api.ajax({
            url: BASE_URL + 'App/User/register',
            method: 'post',
            data: {
                values: postData
            }
            },function(ret, err){
                if (ret) {
                    if(ret.code == 1){
                        
                        USER_INFO = ret.data;
                        loginSuccess();
                    }else{
                        toast(ret.msg);
                    }
                }
            isSave = false;
        });


    }
    // 打开客服弹框
    function openKefu() {
        api.actionSheet({
            title: '咨询客服',
            cancelTitle: '取消',
            destructiveTitle: '',
            buttons: ['0571-85161613']
        }, function(ret, err) {
            var index = ret.buttonIndex;
            if(index==1){
                api.call({
                    type: 'tel_prompt',
                    number: '057185161613'
                });
            }
        });
    }
function loginSuccess(){
    toast('注册成功');
    api.setPrefs({
        key: 'userId',
        value: USER_INFO.userid
    });
    api.setPrefs({
        key: 'userInfo',
        value: USER_INFO
    });
    api.sendEvent({
        name: 'loginSuccessEvent'
    });
    setTimeout(function(){
        api.closeToWin({
            name: 'root'
        });
    },1000);
}
</script>

</html>
